<template>
	<view>
		<view id="page_content">
			<tui-drawer mode="right" :visible="isopen">
				<headNav @close="closeOpen" @showTips="showTips"></headNav>
			</tui-drawer>
			<view class="page trade_history_page table_page">
				<view class="page_header commom_header_share">
					<view class="back_btn" @click="goBack"></view>
					<view class="header_center">
						<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>
						<view class="golden-title"><text class="font-46">{{$t('Link-Manager')}}</text></view>
						<view class="add_link_btn" @click="openShare()">{{$t('Generate-Link')}}</view>
					</view><button class="menu_btn" @click="navs('showLeft')">
						<image src="/static/images/entryscreen/menu.svg" mode="widthFix">
					</button>
				</view>
				<view class="table_header mobile-view">
					<view class="th sortable date sorter desc">#</view>
					<view class="th sortable pool">地址</view>
					<view class="th sortable investment">左区</view>
					<view class="th hash_details">右区</view>
					<view class="th hash_details">入金总额</view>
					<view class="th hash_details">总业绩</view>
				</view>
				<view class="trade_history_list">
		
					<view class="tui-tool" v-for="(item,index) in shareList" :key="index">
						<view class="tui-tool-item flex-block">
							<view class="">{{index+1}}</view>
						    <view ><image :src="item.user_headimg" mode="widthFix" class="avator"></image></view>
						  <!-- <image src="/static/images/entryscreen/menu.svg" mode="widthFix"> -->
						</view>
						<view class="tui-tool-item item-address" @click="goToWeb('https://bscscan.com/address/'+item['addresss'])">{{item['address']}}</view>
						<view class="tui-tool-item">{{item['_leftmoney']}}</view>
						<view class="tui-tool-item">{{item['_rightmoney']}}</view>
						<view class="tui-tool-item">{{item['allmoney']}}</view>
						<view class="tui-tool-item">{{item['all']}}</view>
						
					</view>
				</view>
			</view>
		</view>
		<!-- 分享弹出内容 -->
		<view class="popups_container" v-if="showLink">
			<view class="popup">
				<view class="close" @click="closeLink"></view>
				<!-- <view class="content"> -->
				<view class="new_campaign_form" v-if="shareUrls">
					<image src="/static/images/entryscreen/genAffLink.png" class="new_campaign_form_header"
						mode="widthFix">
						<view class="input_label">{{$t('myurls')}}</view>
						<view class="input_box"><input class="name_input" maxlength="15" placeholder="命名您的代理会员链接"
								v-model="shareUrls"></view>
						<view class="gold_btn" @tap="clipboard">{{$t('copyurl')}}</view>
				</view>
				<view class="new_campaign_form" v-else>
					<image src="/static/images/entryscreen/genAffLink.png" class="new_campaign_form_header"
						mode="widthFix">
						<view class="input_label">我的代理会员链接昵称</view>
						<view class="input_box"><input class="name_input" maxlength="15" placeholder="命名您的代理会员链接"
								v-model="shareCode"></view>
						<view class="input_instruct">6 ~ 15个字符，只允许使用英文字母和数字。</view>
						<view class="gold_btn" @click="toShare()">创建链接</view>
				</view>
				<!-- </view> -->
			</view>
		</view>
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop"
			@showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view v-if="showTabbar">
			<tui-tabbar :current="current" @click="tabbarSwitch" backdropFilter :backgroundColor="backgroundColor"
				:tabBar="tabBar" color="#777" selectedColor="#f4d56f"></tui-tabbar>
		</view>
	</view>
</template>

<script>
	const copys = require("@/components/common/tui-clipboard/tui-clipboard.js")
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				showPurse: false,
				isopen: false,
				showLink: false,
				hasToken: false,
				shareCode: '',
				shareUrls: false,
				showTabbar: true,
				shareList: '',
				open_wallet: false,
				page: 1,
				current: 1,
				backgroundColor: '#191c1d',
				tabBar: [{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],
			};
		},
		onLoad() {
			if (this.tui.isLogin()) {
				this.hasToken = true;
				this.init();
			}

		},
		methods: {
			tabbarSwitch(e) {

				this.current = e.index;

			},
			goToWeb(url) {
				window.open(url)
			},
			init() {
				let datas = {
					page: 1,
					size: 20
				};
				/* 获取分享地址 */
				let shareUrls = this.tui.request('/api/user/shared', 'post', datas, 1000, 1, '', 'shared');
				Promise.resolve(shareUrls).then((value) => {
					if (value.code == 200) {
						this.shareUrls = value.data.shared_url
					} else {

					}
				})
				let result = this.tui.request('/api/user/getMyTeam', 'post', datas, 1000, 1, '', 'getMyTeam');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						if (value.data.child) {
							this.page++;
							this.shareList = value.data.child
						}

					}
				})

			},
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			closeOpen() {

				this.isopen = false
			},
			openShare() {
				this.showLink = true;
			},
			goBack() {
				uni.navigateBack()
			},
			openModel() {
				this.open_wallet = true;
			},
			closePop() {
				this.open_wallet = false;
				this.showTabbar = true
			},
			toShare() {
				let token = this.tui.getToken();
				let datas = {
					codes: this.shareCode
				};
				let result = this.tui.request('api/user/createShare', 'post', datas, 1000, 1, '', 'createShare');
				Promise.resolve(result).then((value) => {

					if (value.code != 200) {
						this.showTips(value.message, 'warning');

					} else {
						this.showTips(this.$t('saveSuccess'), 'green');

					}
				})
			},
			lower(codes) {
				let datas = {
					codes: codes
				};
				let result = this.tui.request('/api/user/shareListCode', 'get', datas, 1000, 1, '', 'shareListCode');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						this.shareList = value.data
					}
				})
			},
			clipboard: function(event) {
				copys.getClipboardData(this.shareUrls, (res) => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						this.showTips(this.$t('copy-success'), 'green');
					} else {
						this.showTips(this.$t('copy-failed'), 'warning');
					}
					// #endif
				}, event)
			},
			closeLink() {
				this.showLink = false;
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},
		},
		onReachBottom() {
			// if (!this.pullUpOn) return;
			this.loadding = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
			let datas = {
				page: this.page,
				size: 20
			};
			let accoutList = this.tui.request('api/v1/user/shareList', 'get', datas, 1000, 1, '');
			Promise.resolve(accoutList).then((value) => {
				if (value.status == 200) {
					if (this.recordsList.concat(value.data)) {
						this.recordsList = this.recordsList.concat(value.data);
						this.page++;
					}

				} else {
					this.tui.toast(value.message);
				}
			})
		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';

	page {
		// background-color: #0c0d13;
		// background: #000;
		color: #fff;
		font-family: "Barlow Semi Condensed", sans-serif;
		// margin: 0;
		// padding: 0;
		// overflow: hidden;
	}
	.avator{
		width:46rpx;height: 46rpx;
		margin-left: 20rpx;
		border-radius: 46rpx;
		margin-top: 14rpx;
		border-radius: 10rpx;
	}
    .item-address{
		color:#00abfc !important;
		font:'Barlow Semi Condensed';
		font-weight: normal;
	}
	.trade_history_list {
		background-color: #0c0d13;
		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		padding: 0rpx;
		// margin-top: 12rpx;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		z-index: 2
	}

	.tui-tool {
		display: flex;
		flex-direction: row;
	}
    .flex-block{
		display: flex;
		margin-left: 0rpx;
		padding-left: 30rpx;
		justify-content: left !important;
	}
	.tui-tool-item {
		width: 25%;
		display: flex;
		// align-items: center;
		background-color: #191c27;
		    margin-bottom: .3em;
			    height: 80rpx;
			    max-height:80rpx;
		justify-content: center;
		// padding-left: 10rpx;
		line-height: 80rpx;
		font-size: 25rpx;
		color: #f4d56f;
	}
</style>